<%@ page import="com.flats.model.entity.Users" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--@elvariable id="user" type="com.flats.model.entity.Users"--%>
<link rel="stylesheet" href="<c:url value="/css/header.css" />">
<link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css" />">
<link rel="stylesheet" href="<c:url value="/css/font-awesome.css" />">
<link rel="stylesheet" href="<c:url value="/css/jquery-ui.min.css" />">
<script type="text/javascript" src="<c:url value="/js/jquery-1.9.0.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/bootstrap.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-ui-1.10.4.min.js"/>"></script>
<div id="loaderDiv">
    <img src="<c:url value="/images/ajax-loader.gif" />" alt="">
</div>
<div class="flat-header">
    <img class="logo" src="<c:url value="/images/logo.png" />" alt=""/>

    <%
        Users userSess = (Users) Utils.getSession(Constants.USER);
        if (userSess == null) {
    %>

    <nav class="auth">
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="inputEmail">Email address</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="inputPassword">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
            <button type="button" class="btn btn-primary sign-in">Sign in</button>
            <button type="button" class="btn btn-warning sign-up " data-toggle="modal" data-target="#myModal">Sign
                up
            </button>
            <div class="checkbox remember-me">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </form>
    </nav>

    <%}%>
    <div class="login-user pull-right
    <%if(userSess != null) {%>show<%}%>
    ">
        <ul class="nav pull-right">
            <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown">Welcome, <%if (userSess != null){%><%=userSess.getName()%><%}%>
                <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="<%=request.getContextPath()%>/cabinet"><i class="icon-cog"></i> My Cabinet</a></li>
                    <li class="divider"></li>
                    <li><a class="logout" href="#"><i class="icon-off"></i> Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Login Form</h4>
                </div>
                <div class="modal-body">
                    <div class="successLogin alert alert-success">
                        <span class="glyphicon glyphicon-ok pull-left"></span>

                        <p>You successfully registered!</p>
                    </div>
                    <%@include file="loginForm.jsp" %>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary send">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    (function ($) {
        $(function () {
            $('.sign-up').on('click', function () {
                $('#myModal').modal();
            });
            $('.sign-in').on('click', function () {
                $.ajax({
                    url: "login.inline",
                    data: "email=" + $('#inputEmail').val() + "&password=" + $('#inputPassword').val(),
                    success: function (response) {
                        $('.auth').removeClass('show').addClass('hidden');
                        $('.login-user').removeClass('hidden').addClass('show');
                        $('.dropdown-toggle').html('Welcome,' + response);
                    }
                });
            });
            $('#myModal').on('hidden.bs.modal', function () {
                $('.successLogin').css('display', 'none');
                $(this).find('form')[0].reset();
            })
            $('.logout').on('click', function () {
                console.log("logout");
                $.ajax({
                    url: "logout",
                    success: function (response) {
                        $('.login-user').removeClass('show').addClass('hidden');
                        $('.auth').removeClass('hidden').addClass('show');
                    }

                });

            });

            $('.send').on('click', function () {
                console.log("click");
                var serialize = $('#loginForm').serialize();
                console.log("=======serialize==========", serialize);
                $.ajax({
                    url: "login.form",
                    data: "name=" + $('#name').val() + "&email=" + $('#email').val() + "&password=" + $('#password').val() + "&phone=" + $('#phone').val(),
                    beforeSend: function () {
                        $("#loaderDiv").css('display', 'block');
                    },
                    success: function (response) {
                        console.log("ajax complete");
                        console.log("response", response);
                        $("#loaderDiv").css('display', 'none');
                        var split = response.split(".");
                        console.log("split[0]", split[0]);
                        console.log("split[1]", split[1]);
                        if (split[0] != 'You successfully registered') {
                            $('.successLogin').removeClass('alert-success').addClass('alert-danger');
                            $('.successLogin p').html(split[0]);
                        }
                        $('.successLogin').addClass('show');
                        ;
                        $('.auth').addClass('hidden');
                        $('.login-user').addClass('show');
                        ;
                        $('.dropdown-toggle').html('Welcome,' + split[1]);
                    }

                });
            });
        });
    })(jQuery);
    ;

</script>